<template>
  <div>
    <el-card>
      <el-form :inline="true">
        <el-form-item label="集群:">
            <el-select v-model="cluster" placeholder="请选择集群" @change="checkCluster">
                <el-option v-for="val in clusterList" :label="val.label" :value="val.value" />
            </el-select>
        </el-form-item>
      </el-form>
      <el-table ref="table" :data="tableList" v-loading="loadFlag">
          <el-table-column type="index" label="序号" width="55"/>
          <el-table-column label="组件" prop="type" />
          <el-table-column label="服务名称" prop="name" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="detail(scope.row)">详情</el-button>
            </template>
          </el-table-column>
      </el-table>
      <el-dialog
        :close-on-click-modal="false"
        :before-close="handleClose"
        :visible.sync="detailFlag"
        title="详情"
        width="1000px"
      >
        <el-descriptions
            class="margin-top"
            title="Service Details"
            :column="1"
            :size="size"
            border
        >
            <el-descriptions-item label="Service Name">
                {{ detailData.name}}
            </el-descriptions-item>
            <el-descriptions-item label="Display Name">
                {{ detailData.displayName }}
            </el-descriptions-item>
            <el-descriptions-item label="Description">
                {{ detailData.description }}
            </el-descriptions-item>
            <el-descriptions-item label="Tag Service">
                {{ detailData.tagService }}
            </el-descriptions-item>
        </el-descriptions>
        <hr>
        <el-descriptions
            class="margin-top"
            title="Config Properties"
            :column="1"
            :size="size"
            border
        >
            <el-descriptions-item v-for="item in config" :label="item.label">
                {{ item.value}}
            </el-descriptions-item>
        </el-descriptions>
        <hr>
        <span style="font-size:16px;font-weight:bold">Audit Filter</span>
        <el-table :data="filters">
            <el-table-column label="Is Audited" prop="isAudited" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.isAudited==true">YES</span>
                    <span v-if="scope.row.isAudited==false">NO</span>
                </template>
            </el-table-column>
            <el-table-column label="Access Result" prop="accessResult" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.isAudited">{{ scope.row.accessResult }}</span>
                    <span v-if="!scope.row.isAudited">--</span>
                </template>
            </el-table-column>
            <el-table-column label="Resources" prop="resources" width="450" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.resources">{{ scope.row.resources.path.values}}</span>
                    <span v-if="!scope.row.resources">--</span>
                </template>
            </el-table-column>
            <el-table-column label="Operations" prop="actions" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span v-if="scope.row.actions">{{ scope.row.actions}}</span>
                    <span v-if="!scope.row.actions">--</span>
                </template>
            </el-table-column>
            <el-table-column label="Permissions" prop="permissions" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.permissions">{{ scope.row.permissions}}</span>
                    <span v-if="!scope.row.permissions">--</span>
                </template>
            </el-table-column>
            <el-table-column label="Users" prop="users" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.users">{{ scope.row.users}}</span>
                    <span v-if="!scope.row.users">--</span>
                </template>
            </el-table-column>
            <el-table-column label="Groups" prop="groups" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.groups">{{ scope.row.groups}}</span>
                    <span v-if="!scope.row.groups">--</span>
                </template>
            </el-table-column>
            <el-table-column label="Roles" prop="roles" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.roles">{{ scope.row.roles}}</span>
                    <span v-if="!scope.row.roles">--</span>
                </template>
            </el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import audit from '@/api/phaseTwo/audit.js'
    export default {
        data() {
        return {
            tableList:[],
            detailData:{},
            detailFlag:false,
            size: '',
            config:[],
            filters:[],
            loadFlag:false,
            cluster:'',
            clusterList:[],
            allData:[]
        };
        },
        created(){
          this.getInfo()
        },
        mounted(){
        },
        methods:{
            getInfo(){
                this.loadFlag=true
                this.tableList=[]
                audit.rangerInfo().then((res)=>{
                    this.allData=res
                    this.loadFlag=false
                    res.forEach((item)=>{
                        let obj={value:item.cmFlag,label:item.cmName}
                        this.clusterList.push(obj)
                        //集群去重
                        let arr=[]
                        this.clusterList.forEach((val,index)=>{
                            if(arr.indexOf(this.clusterList[index].value)==-1){
                                arr.push(this.clusterList[index].value)
                            }else{
                                this.clusterList.splice(index,1)
                            }
                        })
                        //默认第一个
                        this.cluster=this.clusterList[0].value
                        if(this.cluster==item.cmFlag){
                          this.tableList.push(JSON.parse(item.info))
                        }
                    })
                })
            },
            detail(row){
                this.config=[]
                this.detailData=row
                this.detailFlag=true
                for (let key in row.configs){
                    if(key!='ranger.plugin.audit.filters'){
                        this.config.push({label:key,value:row.configs[key]})
                    }
                }
                let str=row.configs['ranger.plugin.audit.filters'].replace(/'/g,'"')
                this.filters=JSON.parse(str)
            },
            handleClose(){
                this.detailFlag=false
            },
            checkCluster(){
                this.tableList=[]
                this.allData.forEach((item)=>{
                    if(this.cluster==item.cmFlag){
                      this.tableList.push(JSON.parse(item.info))
                    }
                })
            } 
        }
    }
</script>
